<template>
    <div class="edu-page-warp">
        <div class="edu-page-title">{{ $t('message.filterCondition') }}</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <el-form ref="queryForm" :model="queryForm" label-width="80px" class="bg-white pd-12px">
                <el-row :gutter="20" style="height: 50px;">
                    <el-col :span="6">
                        <el-form-item label="异动大类:" :label-width="formLabelWidth">
                            <el-select v-model="queryForm.classId">
                                <el-option
                                    v-for="item in options.abnormalClasses"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="异动类型:" :label-width="formLabelWidth">
                            <el-select v-model="queryForm.typeId">
                                <el-option
                                    v-for="item in options.abnormalTypes"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="年级:" :label-width="formLabelWidth">
                            <el-select v-model="queryForm.grade">
                                <el-option
                                    v-for="item in options.grade"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="培养层次:" :label-width="formLabelWidth">
                            <el-select v-model="queryForm.trainingLevel">
                                <el-option
                                    v-for="item in options.trainingLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="学院:" :label-width="formLabelWidth">
                            <el-select v-model="queryForm.faculty" @change="changeFaculty">
                                <el-option
                                    v-for="item in options.faculty"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="专业:" :label-width="formLabelWidth">
                            <el-select v-model="queryForm.profession">
                                <el-option
                                    v-for="item in options.profession"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="是否国际学生:" :label-width="formLabelWidth">
                            <el-select v-model="queryForm.isLeaveStudent">
                                <el-option
                                    v-for="item in options.isLeaveStudent"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item class="float-right">
                            <el-button @click="reset">{{ $t('message.reset') }}</el-button>
                            <el-button type="primary" @click="onSubmit">{{ $t('message.filter') }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <div class="edu-page-title mg-top">学籍异动列表</div>
        <el-card shadow="never" body-style="padding: 24px;">
            <el-row class="border-bottom" style="height:56px;">
                <el-col :span="4">
                    <el-input
                        v-model="queryForm.keyWord"
                        placeholder="学号或姓名搜索"
                        prefix-icon="el-icon-search"
                        @keyup.enter.native="initTableData"
                    />
                </el-col>
                <el-col :span="20">
                    <div class="float-right">
                        <el-button type="primary" @click="exportItem">导出</el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table :data="abnormalStatistics">
                <el-table-column label="学号">
                    <template slot-scope="scope">{{ scope.row.studentId }}</template>
                </el-table-column>
                <el-table-column label="姓名">
                    <template slot-scope="scope">{{ scope.row.studentName }}</template>
                </el-table-column>
                <el-table-column label="年级">
                    <template slot-scope="scope">{{ scope.row.grade}}</template>
                </el-table-column>
                <el-table-column label="学院">
                    <template slot-scope="scope">{{ scope.row.facultyI18n }}</template>
                </el-table-column>
                <el-table-column label="专业">
                    <template slot-scope="scope">{{ scope.row.professionI18n}}</template>
                </el-table-column>
                <el-table-column label="培养层次">
                    <template slot-scope="scope">{{ scope.row.trainingLevelI18n}}</template>
                </el-table-column>
                <el-table-column label="专业">
                    <template slot-scope="scope">{{ scope.row.professionI18n}}</template>
                </el-table-column>
                <el-table-column label="操作" width="90">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" @click="viewDetail(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="edu-pagination">
                <div class="float-right">
                    <el-pagination
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20,50,100,500,1000]"
                        :page-size="queryForm.pageSize_"
                        :total="totalCount"
                        layout="total, sizes, prev, pager, next, jumper"
                        style="float: right;margin:10px 60px 0 0;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                    />
                </div>
            </div>
        </el-card>
    </div>
</template>
<script>
import * as API from "common/src/api/studentStatus";
import utils from "common/src/utils/utils";
import { yesOrNo } from "common/src/filters/commonFilter";
import { queryDic } from "common/src/api/dictionary";
export default {
    name: "statusCategoryExt",
    data() {
        const getGrade = (function() {
            const now = new Date().getFullYear();
            const years = [];
            for (let i = 0; i < 6; i++) {
                years.push({
                    label: now - i,
                    value: now - i
                });
            }
            return years;
        })();
        return {
            formLabelWidth: "120px",
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                classId: "",
                typeId: "",
                grade: "",
                trainingLevel: "",
                faculty: "",
                profession: "",
                isLeaveStudent: "",
                keyWord: ""
            },
            options: {
                abnormalClasses: [],
                abnormalTypes: [],
                grade: getGrade,
                trainingLevel: [],
                faculty: [],
                profession: [],
                studentCategory: [],
                isLeaveStudent: [
                    {
                        label: "是",
                        value: 1
                    },
                    {
                        label: "否",
                        value: 0
                    }
                ]
            },
            abnormalStatistics: [],
            totalCount: 0
        };
    },
    mounted() {
        this.initOptions();
        this.initTableData();
    },
    methods: {
        async initTableData() {
            API.getAbnormalStatistics(this.queryForm).then(response => {
                let {
                    code,
                    data: { list, total_ }
                } = response;
                if (code === 200) {
                    this.abnormalStatistics = list;
                    this.totalCount = total_;
                }
            });
        },
        initOptions() {
            let params = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_PYCC", "X_YX"]
            };
            let { code, data } = queryDic(params);
            if (code === 200) {
                this.fillSelect(res.data);
            }
            // 获取异动大类
            API.getStatusCategoriesNoPage().then(response => {
                let { code, data } = response;
                if (code === 200) {
                    this.options.abnormalClasses = data.map(item => ({
                        label: item.name,
                        value: item.id + ""
                    }));
                }
            });
            // 获取异动类型
            API.getTypeListNOPage().then(response => {
                let { code, data } = response;
                if (code === 200) {
                    this.options.abnormalTypes = data.map(item => ({
                        label: item.name,
                        value: item.id + ""
                    }));
                }
            });
        },
        changeFaculty(val) {
            this.options["profession"] = [];
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["G_ZY"],
                filter: {
                    prefix: [val],
                    specilaCode: "XY2ZY"
                }
            };
            queryDic(data).then(res => {
                if (res.code === 200) this._fill("profession", res.data.G_ZY);
            });
        },
        fillSelect(data) {
            let { X_PYCC, X_YX } = data;
            this._fill("trainingLevel", X_PYCC);
            this._fill("faculty", X_YX);
            // this._fill("profession", data.G_ZY);
        },
        _fill(type, data) {
            for (const key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                });
            }
        },

        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val;
            this.initTableData();
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val;
            this.initTableData();
        },
        reset() {
            this.queryForm.classId = "";
            this.queryForm.typeId = "";
            this.queryForm.pageNum_ = 1;
            this.queryForm.pageSize_ = 20;
            this.queryForm.grade = "";
            this.queryForm.trainingLevel = "";
            this.queryForm.faculty = "";
            this.queryForm.profession = "";
            this.queryForm.isLeaveStudent = "";
            this.queryForm.keyWord = "";
            this.initTableData();
        },
        viewDetail(row) {
            this.$route.push({
                name: ""
            });
        },
        isAllKeyEmpty(obj = {}) {
            return !!Object.values(obj).join("");
        }
    },
    filters: {
        yesOrNo,
        getStudentCategoryText(value, list) {
            if (!value) {
                return "";
            }
            let keys = value.split(",");
            return keys.reduce((prev, curr, index) => {
                prev += list[curr];
                if (index < keys.length - 1) {
                    prev += ",";
                }
                return prev;
            }, "");
        }
    }
};
</script>
<style>
</style>
